﻿@{
    ViewBag.Title = "Home Page";
    Layout = null;
}
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }

        #allmap {
            width: 85%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
            float: left;
        }

        .mytool {
            width: 12% !important;
            padding: 10px;
            float: left;
        }
    </style>
    <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yhrrtMFXk6mj0Iwl4YxRH5YRP6zPHqAl"></script>
    <script src="~/Content/jquery.min.js"></script>
    <script src="~/Content/data.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
    <!--<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>-->
    <title>变电站</title>
</head>

<body>
    <div class="mytool">
        @*经度:<input type="text" id="lng" value="114.517925"><br>
            纬度:<input type="text" id="lat" value="36.618941"><br>
            <input type="button" value="发出警报" id="btnAlarm" /><br>
            <input type="button" value="删除警报" id="btnDelAlarm">*@
        <input type="text" id="txtSearch" placeholder="线路名称" />
        <input type="button" value="查询" id="btnSearch">
        <BR>
        <BR>
        @*<P>
            目前包含功能
            <br>
            1.右上角缩放和比例尺
            <br>
            2.左上角路况信息<br>
            3.地图切换类型，普通，卫星，3D<br>
            4.全景地图（只有市区蓝色部分可以查看）<br>
            5.右下角缩略图<br>
            6.展示变电站<br>
            7.显示通信线路,颜色可设置<br>
            8.点击变电站名称弹出详细信息<br>
            9.鼠标移动至线路时高亮显示<br>
            10.点击线路显示两端点的距离<br>
            11.左侧列表提供了输入经纬度自动定位报警地点<br>
            方圆500米高亮显示<br>
            12.删除报警<br>

            <br>
            <span style="color:red">
                注意：
            </span>
            <br>
            <span style="color:red">
                目前不开放后台添加变电站和线路功能，<br>
                仅供演示使用。
            </span>


        </P>*@

        <div style="width:100%; height:auto;">
            线路指示
            <ul id="linePanel">
                @*<li>线路1<hr style="background-color:#ff0000; height:5px; width:100px;" /></li>
                <li>线路1<hr style="background-color:#ff0000; height:5px; width:100px;" /></li>*@
            </ul>
        </div>
    </div>
    <div id="allmap" style="border-left:1px solid #000"></div>
</body>

</html>
<script type="text/javascript">

    // 百度地图API功能
    var map = new BMap.Map("allmap");

    map.setMapStyle({
        styleJson: [
          {
              "featureType": "label",
              "elementType": "all",
              "stylers": {
                  "visibility": "on"
              }
          },
         {
             "featureType": "poi",
             "elementType": "all",
             "stylers": {
                 "color": "#ffffff"
             }
         },
         {
             "featureType": "background",
             "elementType": "all",
             "stylers": {
                 "color": "#ffffff"
             }
         },
         {
             "featureType": "highway",
             "elementType": "geometry.fill",
             "stylers": {
                 "visibility": "off"
             }
         },
         {
             "featureType": "highway",
             "elementType": "geometry.stroke",
             "stylers": {
                 "visibility": "off"
             }
         },
         {
             "featureType": "railway",
             "elementType": "all",
             "stylers": {
                 "visibility": "on"
             }
         },
         {
             "featureType": "local",
             "elementType": "all",
             "stylers": {
                 "visibility": "off"
             }
         },
         {
             "featureType": "arterial",
             "elementType": "all",
             "stylers": {
                 "visibility": "off"
             }
         },
         {
             "featureType": "boundary",
             "elementType": "geometry.fill",
             "stylers": {
                 "color": "#e06666",
                 "visibility": "on"
             }
         }
        ]
    });

    //map.setMapStyle({ style: 'googlelite' });
    map.centerAndZoom("邯郸", 11);
    //map.disableDragging();     //禁止拖拽
    map.enableDragging();   //开启拖拽
    map.enableScrollWheelZoom(true); // 启动缩放地图
    map.addControl(new BMap.MapTypeControl()); // 添加地图类型控件
    var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    //var overViewOpen = new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT });
    // 覆盖区域图层测试
    map.addTileLayer(new BMap.PanoramaCoverageLayer());
    var stCtrl = new BMap.PanoramaControl(); //构造全景控件
    stCtrl.setOffset(new BMap.Size(20, 40));
    map.addControl(stCtrl);//添加全景控件

    var ctrl = new BMapLib.TrafficControl({
        showPanel: false //是否显示路况提示面板
    });
    ctrl.setOffset(new BMap.Size(150, 10));
    map.addControl(ctrl);
    //ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_LEFT);

    map.addControl(top_left_control);
    map.addControl(top_left_navigation);
    //map.addControl(overViewOpen);

    var currentPosition = null;
    map.addEventListener("mousemove", function (e) {
        var jing_du_value = e.point.lng;
        var wei_du_value = e.point.lat;
        currentPosition = new BMap.Point(e.point.lng, e.point.lat);

    });


    var opts = {
        width: 250,     // 信息窗口宽度
        height: 110,     // 信息窗口高度
        title: "提示信息", // 信息窗口标题
        enableMessage: true //设置允许信息窗发送短息
    }

    //循环画出轮廓线
    for (var i = 0; i < data.boundary.length; i++) {
        getBoundary(data.boundary[i]);
    }
    showLinePanel();
    function drawLine(name) {
        $.post('/Data/GetLines', { name: name }, function (data) {
            if (!data)
                return;
            for (var i = 0; i < data.length; i++) {

                var linePoints = [];
                for (var item in data[i].Point) {
                    var p = new BMap.Point(data[i].Point[item].Lng, data[i].Point[item].Lat);
                    linePoints.push(p)
                }
                //定义折线
                var polyline = new BMap.Polyline(linePoints,
                    {
                        //strokeStyle: "dashed",
                        strokeColor: "#" + data[i].Color,
                        strokeWeight: 2,
                        strokeOpacity: 0.5
                    });
                map.addOverlay(polyline);     //添加折线到地图上

                polyline.addEventListener("mouseover", function (e) {

                    e.target.setStrokeOpacity(1);
                    e.target.setStrokeWeight(5)
                    //e.target.setStrokeColor("blue")

                });

                polyline.addEventListener("mouseout", function (e) {
                    e.target.setStrokeOpacity(0.5)
                    e.target.setStrokeWeight(2)
                    //e.target.setStrokeColor("#2828ff")
                });

                var d = data[i];
                polyline.addEventListener('click', function (e) {
                    var label = new BMap.Label("", opts);  // 创建文本标注对象
                    label.setStyle({
                        //color: "#fff",
                        backgroundColor: "blue",
                        //fontSize: "12px",
                        //lineHeight: "auto",
                        border: "1px solid blue",
                        width: "10px",
                        height: "10px",
                        padding: "0px",
                        //fontFamily: "微软雅黑"
                    });
                    var p = e.currentTarget;
                    console.log(p)
                    var km = (e.currentTarget.LS / 1000).toFixed(2);
                    var html = '<div style="margin:0;line-height:20px;padding:2px;font-size:12px">' +
                           '线路名称:' + d.Name + '<br/>' +
                           '两地距离：' + km + '千米<br/>' +
                         '</div>'
                    var infoWindow = new BMap.InfoWindow(html, label);  // 创建信息窗口对象
                    map.openInfoWindow(infoWindow, currentPosition); //开启信息窗口

                })
            }
        })


    }
    function drawLabel() {

        $.post('/Data/GetAllPoints', {}, function (data) {
            if (!data)
                return;

            for (var i = 0; i < data.length; i++) {

                var point = new BMap.Point(data[i].Lng, data[i].Lat);
                var opts = {
                    position: point,    // 指定文本标注所在的地理位置
                    //offset   : new BMap.Size(0, 0)    //设置文本偏移量
                };

                if (data[i].PointType == "BDZ") {
                    var label = new BMap.Label(data[i].Name, opts);  // 创建文本标注对象
                    label.setStyle({
                        color: "#fff",
                        backgroundColor: "red",
                        fontSize: "12px",
                        //lineHeight: "2",
                        padding: "0px",

                        fontFamily: "微软雅黑"
                    });

                    map.addOverlay(label);
                    addClickHandler(data[i], label);
                } else {
                    var label = new BMap.Label("", opts);  // 创建文本标注对象
                    label.setStyle({
                        //color: "#fff",
                        backgroundColor: "blue",
                        //fontSize: "12px",
                        //lineHeight: "auto",
                        border: "1px solid blue",
                        width: "10px",
                        height: "10px",
                        padding: "0px",
                        //fontFamily: "微软雅黑"
                    });

                    map.addOverlay(label);
                    addClickHandler(data[i], label);
                }



            }

        })


    }
    function addClickHandler(p, marker) {
        marker.addEventListener("click", function (e) {
            openInfo(p, e)
        }
		);
    }
    function openInfo(pt, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);

        var gc = new BMap.Geocoder();
        var address = "未知地址";
        gc.getLocation(point, function (rs) {
            //console.log(rs)
            //var addComp = rs.addressComponents;
            //console.log(addComp)
            //address = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
            address = rs.address;
            var name = "";
            if (pt.PointType == "BDZ") {
                name = "变电站名称:" + pt.Name;
            } else {
                name = "线杆编号:" + pt.Name;
            }
            //var html= '名称:'+content+'<br/>经度:'+p.getPosition().lng+'<br/>纬度:'+p.getPosition().lat;
            var html = '<div style="margin:0;line-height:20px;padding:2px;font-size:12px">' +
                            //'<img src="dianzhan.png" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
                            name + '<br/>' +
                            '经纬度:' + p.getPosition().lng + ',' + p.getPosition().lat + '<br/>' +
                            '备注:' + pt.Remark + '<br/>' +
                            '地址：' + address + '<br/>' +
                          '</div>'
            var infoWindow = new BMap.InfoWindow(html, opts);  // 创建信息窗口对象
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        })
    }

    //画出区域轮廓线
    function getBoundary(data) {
        var bdary = new BMap.Boundary();
        bdary.get(data.split("-")[0], function (rs) {
            var bounds;
            var maxNum = -1, maxPly;
            var count = rs.boundaries.length;
            for (var i = 0; i < count; i++) {
                var line = 0.5;
                if (data.split("-")[0] == "邯郸") {
                    line = 2
                }
                var ply = new BMap.Polygon(rs.boundaries[i], { strokeStyle: "solid", strokeWeight: line, strokeOpacity: 0, fillColor: "", setFillOpacity: 0, strokeColor: "red" });
                map.addOverlay(ply);
            }
            //if(maxPly){
            // map.setViewport(maxPly.getPoints());
            //}
        });
    }
    function setAlarm() {
        var lng = $("#lng").val();
        var lat = $("#lat").val();
        var point = new BMap.Point(lng, lat);

        var myIcon = new BMap.Icon("http://api.map.baidu.com/library/TextIconOverlay/1.2/src/images/m0.png", new BMap.Size(300, 157));

        var marker = new BMap.Marker(point, { icon: myIcon });  // 创建标注
        map.addOverlay(marker);               // 将标注添加到地图中
        //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

        var circle = new BMap.Circle(point, 500, { fillColor: "red", strokeWeight: 1, fillOpacity: 0.3, strokeOpacity: 0.3 });
        map.addOverlay(circle);

        //var markers = [];
        //markers.push(marker)
        //var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});

        map.centerAndZoom(point, 17);

        $("#btnDelAlarm").click(function () {
            map.removeOverlay(marker);
            map.removeOverlay(circle);
        })

    }
    function showLinePanel() {
        $.post('/Data/GetLines', {}, function (data) {
            for (var i = 0; i < data.length; i++) {
               
                var html = '<li style="list-style-type:none"><div style="float:left; margin-top:4px;background-color:#' + data[i].Color + '; height:10px; width:10px;margin-right:10px;" ></div>' + data[i].Name + '</li>';

                $("#linePanel").append(html)
            }
        })
    }

    $(function () {
        $("#btnAlarm").click(function () {
            setAlarm();
        })

        $("#btnSearch").click(function () {
            map.clearOverlays();
            drawLabel();
            var txt = $("#txtSearch").val();

            drawLine(txt);

            //循环画出轮廓线
            for (var i = 0; i < data.boundary.length; i++) {
                getBoundary(data.boundary[i]);
            }
        })

    })



</script>
